<template>
    <layout-main :nav="data">
        <div class="section-row top-bar">
            <div class="left">
                <weather></weather>
            </div>

            <div class="right">
                <nav-life></nav-life>
            </div>
        </div>

        <el-row :gutter="15" class="section-row">
            <el-col :span="16">
                <section-follow :body-height="400"></section-follow>
            </el-col>

            <el-col :span="8">
                <section-remind :body-height="400"></section-remind>
            </el-col>
        </el-row>

        <el-row :gutter="15" class="section-row">
            <el-col :span="24">
                <section-entrance></section-entrance>
            </el-col>
        </el-row>

        <el-row :gutter="15" class="section-row">
            <el-col :span="24">
                <section-nav-collect></section-nav-collect>
            </el-col>
        </el-row>
    </layout-main>
</template>

<script>
import LayoutMain from '../layout/main.vue';

import SectionFollow from './sections/follow.vue';
import SectionRemind from './sections/remind.vue';
import SectionNavCollect from './sections/nav-collect.vue';
import SectionEntrance from './sections/entrance.vue';

import CardHome from '../components/card-home.vue';
import Weather from '../components/weather.vue';
import NavLife from '../components/nav-life.vue';

import HOME_MAIN_MIXIN from '../mixins/main.js';

export default {
    mixins: [HOME_MAIN_MIXIN],
    components: {
        LayoutMain,
        SectionFollow,
        SectionRemind,
        SectionNavCollect,
        SectionEntrance,
        CardHome,
        Weather,
        NavLife,
    },
    data() {
        return {
            
        };
    },
    methods: {
        
    },
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
.section-row{
    & + .section-row{
        margin-top: 15px;
    }
}

.top-bar{
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    background: white;

    .left{
        flex: 1;
    }
}
</style>